import React, {useEffect, useState} from "react";
import './record_manege.scss'
import {Button, Input, Select, Table} from "antd";
import {Option} from "antd/es/mentions";
import {getUserRecordTaskInfoWithConditions} from "../../api/recordTaskApi";
import RecordDetail from "../detail/RecordDetail";
import {getRecordTask} from "../../api/recordTaskApi";
import {getProcessHistory} from "../../api/recordProcessHistoryApi";
import {getAuditRecordAndAssignTaskByRecordTaskId} from "../../api/auditRecordApi";
import {formatProcessHistory} from "./recordManageUtils";

function RecordManage() {

    const [data, setData] = useState()
    const [modalVisible, setModalVisible] = useState(false);
    const [recordTask, setRecordTask] = useState({});
    const [recordProcessHistoryArr, setRecordProcessHistoryArr] = useState([]);
    const [auditRecordArr, setAuditRecordArr] = useState([]);

    const columns = [
        {
            title: '停车场名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '备案项目',
            dataIndex: 'stage',
            key: 'stage',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
        },
        {
            title: '所属区域',
            dataIndex: 'districtName',
            key: 'districtName',
        },
        {
            title: '流水号',
            dataIndex: 'sno',
            key: 'sno',
        },
        {
            title: '申请时间',
            dataIndex: 'createdAt',
            key: 'createdAt',
        },
        {
            title: '完成时间',
            dataIndex: 'completedAt',
            key: 'completedAt'
        }
    ];

    const handleRecordDetailOk = () => {
        setModalVisible(false);
    };

    const handleRecordDetailCancel = () => {
        setModalVisible(false);
    }

    const getData = () => {
        getUserRecordTaskInfoWithConditions(13)
            .then(res => {
                setData(res)
            });
    }

    useEffect(() => {
        getData()
    }, []);

    const handleModalVisible = (record) => {
        setModalVisible(true);
        getRecordTask(record.id)
            .then(r => {
                setRecordTask(r);
            })
            .then(() => {
                getProcessHistory(record.id).then(r => {
                    formatProcessHistory(r);
                    setRecordProcessHistoryArr(r);
                }, e => {
                    return e;
                });
            });
        getAuditRecordArr(record.id);
    }

    const getAuditRecordArr = (recordTaskId) => {
        getAuditRecordAndAssignTaskByRecordTaskId(recordTaskId).then(r => {
            setAuditRecordArr(r);
        }, e => {
            return e;
        });
    }

    const {Option} = Select

    return (
        <div className={'parking-manage-container'}>
            <div className={'parking-manage-title'}>
                停车场备案管理
            </div>

            <div className={'parking-manage-select'}>

                <div className={'parking-manage-select-item'}>
                    <div style={{width: 100, margin: "auto", textAlign: "center"}}>停车场类型</div>
                    <Select defaultValue={'类型一'} style={{width: 120}}>
                        <Option value={'类型一'}>类型一</Option>
                        <Option value={'类型二'}>类型二</Option>
                        <Option value={'类型三'}>类型三</Option>
                    </Select>
                </div>

                <div className={'parking-manage-select-item'}>
                    <div style={{width: 100, margin: "auto", textAlign: "center"}}>停车场等级</div>
                    <Select defaultValue={'等级一'} style={{width: 120}}>
                        <Option value={'等级一'}>等级一</Option>
                        <Option value={'等级二'}>等级二</Option>
                        <Option value={'等级三'}>等级三</Option>
                    </Select>
                </div>

                <div className={'parking-manage-select-item'}>
                    <div style={{width: 100, margin: "auto", textAlign: "center"}}>流水号</div>
                    <Input defaultValue={''} style={{width: 120}}/>
                </div>

                <div className={'parking-manage-select-item'}>
                    <div style={{width: 100, margin: "auto", textAlign: "center"}}>停车场名称</div>
                    <Input defaultValue={''} style={{width: 120}}/>
                </div>

                <div className={'parking-manage-select-item'}>
                    <div style={{width: 100, margin: "auto", textAlign: "center"}}>管理单位</div>
                    <Input defaultValue={''} style={{width: 120}}/>
                </div>


                <div className={'parking-manage-select-item'}>
                    <div style={{width: 100, margin: "auto", textAlign: "center"}}>处理状态</div>
                    <Select defaultValue={'状态一'} style={{width: 120}}>
                        <Option value={'状态一'}>状态一</Option>
                        <Option value={'状态二'}>状态二</Option>
                        <Option value={'状态三'}>状态三</Option>
                    </Select>
                </div>

            </div>

            <div className={'parking-manage-panel'}>
                <Button type={'primary'}>查询</Button>
                <Button>重置</Button>
                <Button>导出查询结果</Button>
            </div>

            <div className={'parking-manage-table'}>
                <Table onRow={(record) => {
                    return {
                        onClick: () => {
                            handleModalVisible(record);
                        }
                    }
                }} dataSource={data} columns={columns}/>
            </div>

            <RecordDetail modalVisible={modalVisible}
                          recordTask={recordTask}
                          recordProcessHistoryArr={recordProcessHistoryArr}
                          auditRecordArr={auditRecordArr}
                          onOk={handleRecordDetailOk}
                          onCancel={handleRecordDetailCancel}/>
        </div>
    )
}


export default RecordManage